<template>
  <div id="app">
    <van-sticky>
      <van-nav-bar
        :title="currentPage.meta ? currentPage.meta.title : ''"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <router-view />
    <van-tabbar :value="currentPage.path" @change="onChange">
      <van-tabbar-item name="/blogs" icon="notes-o">博客</van-tabbar-item>
      <van-tabbar-item name="/music" icon="service-o">音乐</van-tabbar-item>
      <van-tabbar-item
        name="/mine"
        :badge="unread ? unread : ''"
        icon="friends-o"
      >我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapGetters(['unread']),
    ...mapState(['currentPage', 'userinfo'])
  },
  watch: {
    userinfo() {
      const ui = this.userinfo
      if (ui._id) {
        this.messageMethod()
        this.sess = setInterval(this.messageMethod, 20000)
      } else {
        clearInterval(this.sess)
        this.setMessage([])
      }
    }
  },
  created() {
    const userinfo = this.$db.userLoc.get('userinfo')
    if (userinfo) {
      this.setUserinfo(userinfo)
    }
  },
  methods: {
    messageMethod() {
      this.message()
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onChange(data) {
      this.$router.push(`${data}`)
    },
    ...mapActions(['message']),
    ...mapMutations(['setUserinfo', 'setMessage'])
  }
}
</script>
